<template>
  <div class="about">

    <navbar :screenWidth="screenWidth" ></navbar>

    <template v-if="screenWidth>576 ">
      <div class="banner" v-if="childitem.imagesMobile && categroyType<3">
        <img class="imgwh" :src="link+childitem.imagesMobile" alt="">
      </div>
      <div class="banner-none" v-else></div>
    </template>


    <div class="content-nav">
      <div class="top-left-icon" v-if="screenWidth>576"></div>
      <div class="bottom-right-icon" v-if="screenWidth>576"></div>

      <div class="text">
        <div class="acea-row row-between fs-14 cursor" @click.stop="backpage" v-if="screenWidth>576">
          <div>所在位置：{{ meunitem.name }} ＞ {{ childitem.name }}</div>
          <div class="cursor"><<返回</div>
        </div>
        <div class="acea-row row-middle row-center mt-5">
          <div class="bianti-icon">
            <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/bianti-left.png" alt="">
          </div>
          <div class="title">{{ childitem.name }}</div>
          <div class="bianti-icon">
            <img class="imgwh" src="https://gbadmin.xinghan.vip/adminapi/profile/pic/biaoti-right.png" alt="">
          </div>
        </div>
      </div>

      <contentform :screenWidth="screenWidth" :categroyType="categroyType" :articleId="articleId" v-if="(categroyType==0 || categroyType==1) && childlist.length==0" :key="timekey"></contentform>

      <Landform :screenWidth="screenWidth" v-if="categroyType==2" :showType="showType" :key="timekey"></Landform>

      <typeform :screenWidth="screenWidth" v-if="childlist.length>0" :childlist="childlist" :key="timekey"></typeform>

      <mapform :screenWidth="screenWidth" :images="images" :categroyType="categroyType" v-if="categroyType==3 || categroyType==4" :key="timekey"></mapform>

    </div>

    <footers :screenWidth="screenWidth" @stopTop="scrollToTop"></footers>

  </div>
</template>
<script>
  import navbar from '@/components/navbar.vue';
  import footers from '@/components/footers.vue';
  import Pagination from '@/components/PaginaTion.vue'
  import Landform from '@/components/Landform.vue'
  import typeform from '@/components/typeform.vue'
  import contentform from '@/components/contentform.vue'
  import mapform  from '@/components/mapform.vue'
  export default {
    name:'AboutView',
    components:{
      navbar,
      footers,
      Pagination,
      Landform,
      typeform,
      contentform,
      mapform
    },
    data(){
      return{
        screenWidth:'1920',
        pageNo:1,
        typeIndex:0,
        categroyType:'', //0文章列表，1文章详情，2图片列表，3地图，4导览图
        showType:'', //显示方式:0文章列表,1文章列表(封面),2图片列表,3图片列表(四宫格)
        link: localStorage.getItem('link'),

        total:'',
        meunitem:[],
        childitem:[],
        contentlist:null,
        timekey:'',
        childlist:[],
        articleId:'',


      }
    },
    watch: {
      // 监听路由对象中的变化
      '$route': {
        handler: function (to, from) {
          // 路由发生变化时触发的操作
          this.scrollToTop();
          this.timekey = new Date().getTime();
          let type = this.$route.query.type || 0;
          if( type==3 ){
            this.categroyType=0;
            this.childlist = [];
          }else{
            this.getType();
            this.getcate(this.$route.query.tid);
          }
          this.meunitem = JSON.parse(localStorage.getItem('meunitem'))
          this.childitem = JSON.parse(localStorage.getItem('childitem'))
          this.handleResize();
          window.addEventListener('resize', this.handleResize);
        },
        // 设置为深度监听
        deep: true
      }
    },
    mounted(){
      this.scrollToTop();
      this.timekey = new Date().getTime();
      let type = this.$route.query.type || 0;
      if( type==3 ){
        this.categroyType=0;
        this.childlist = [];
      }else{
        this.getType();
        this.getcate(this.$route.query.tid);
      }
      this.handleResize();
      window.addEventListener('resize', this.handleResize);
      this.meunitem = JSON.parse(localStorage.getItem('meunitem'))
      this.childitem = JSON.parse(localStorage.getItem('childitem'))
    },
    methods:{
      backpage(){
        this.$router.back();
      },
      scrollToTop() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth' // 平滑滚动
        });
      },
      getType(){
        let that = this;
        that._get('/api/portal/web/categroy/detail',{
          id: this.$route.query.tid
        }).then(res=>{
            that.categroyType = res.data.data.categroyType;
            that.articleId = res.data.data.articleId;
            that.showType = res.data.data.showType;
            that.images = res.data.data.images;
        })
      },
      // 判断是否有下级分类
      getcate(pid){
        let that = this;
        that._get('/api/portal/web/categroy/list',{
          pid: pid
        }).then(res=>{
          that.childlist = res.data.data || [];
          console.log('that.childlist=',that.childlist[0].id);
        })
      },
      handleResize() {
        this.screenWidth = window.innerWidth;
      },
      getPageNo(pageNo){
          this.pageNo = pageNo;
      },
      typeclick(index){
        this.typeIndex = index;
      }
    }
  }
</script>
<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}

.about{

  .about65{
    width: 65%;
    margin: 1.875rem auto;
  }

  .banner{
    width: 100vw;
    height: 47.25rem;
  }
  .banner-none{
    width: 100vw;
    height: 6.25rem;
    background-color: #FFFBF0;
  }

  .content-nav{
    width: 100vw;
    //min-height: 62.5rem;
    background-color: #FFFBF0;
    position: relative;
    overflow: hidden;

    .top-left-icon{
      width: 18.75rem;
      height: 18.75rem;
      background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/wenhuatopleft.png");
      background-size: 100% 100%;
      position: absolute;
      top: 1.25rem;
      left: -1.25rem;
    }
    .bottom-right-icon{
      width: 30rem;
      height: 30rem;
      background-image: url("https://gbadmin.xinghan.vip/adminapi/profile/pic/huawenbottomright.png");
      background-size: 100% 100%;
      position: absolute;
      bottom: 0;
      right: -6.25rem;
    }
    
    .text{
      width: 65%;
      margin: 1.875rem auto;

      .title{
        color: #1E5A54;
        font-size: 1.625rem;
        font-weight: bold;
        margin: 0 .625rem;
      }
      .bianti-icon{
        width: 5.4375rem;
        height: 2.75rem;
      }

    }

  }

}
@media screen and (max-width: 36rem) {

  .about{
    background-color: #FFFBF0;
    padding-top: 6.25rem;

    .bianti-icon{
      width: 3.625rem !important;
      height: 2.5rem !important;
    }
    .title{
      font-size: 1.25rem !important;
    }

    .content-nav{
      height: auto;
    }


  }



  
}



</style>
